@layout("/common/_container.html"){
<style>
    .searchbox {
        margin: 20px;
    }

    .staticbox {
        display: flex;
        align-items: center;
        margin: 20px 0 10px 20px;
        font-size: 16px;
        font-weight: bold;
        color: #000000;
    }

    .static-one {
        margin-right: 30px;
    }

    .static-val {
        color: #F59A23;
    }

    .el-form-item {
        margin-bottom: 0
    }

    .tables {
        margin: 0 20px;
    }

    .reject {
        color: red;
    }

    .reject-title {
        font-size: 16px;
    }

    .pages {
        margin-top: 20px;
    }
</style>
</head>

<body>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="/assets/common/module/vuejs/vue.dev.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="/assets/common/module/element-ui/lib-master/theme-chalk/index.css">
<link rel="stylesheet" href="/assets/common/module/element-ui/lib-master/theme-chalk/display.css">
<!-- 引入组件库 -->
<script src="/assets/common/module/element-ui/lib-master/index.js"></script>

<div id="app">
    <el-divider></el-divider>
    <div class="searchbox">
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item :style="formItemStyle" label="营运经理:">
                <el-select v-model="form.manager" filterable size="small" v-on:change="changeManager"
                           placeholder="请选择">
                    <el-option v-for="(item,index) in managerData" :key="index" :label="item.yyjl"
                               :value="item.yydh">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :style="formItemStyle" label="督导:">
                <el-select v-model="form.supervisor" filterable size="small" v-on:change="changeSupervisor"
                           placeholder="请选择">
                    <el-option v-for="(item,index) in supervisorData" :key="index" :label="item.dd"
                               :value="item.dddh">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :style="formItemStyle" label="店名:">
                <el-select v-model="form.storeModel" filterable size="small" value-key="ym"
                           v-on:change="changeStore" placeholder="请输入店名或妖码查询">
                    <el-option v-for="(item,index) in storeData" :key="index" :label="item.dm+' '+item.ym"
                               :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-select v-model="form.uname" size="small" filterable placeholder="请输入姓名查询">
                <el-option v-for="item in nameData" :key="item.id" :label="item.xm" :value="item.xm">
                    {{item.xm}},{{item.id}},{{item.dm}}
                </el-option>
            </el-select>
            <el-form-item :style="formItemStyle">
                <el-button type="primary" size="small" v-on:click="searchDo">查询</el-button>
                <el-button size="small" v-on:click="resetDo">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="tables">
        <el-table v-loading="loading" :data="tableData" highlight-current-row
                  :header-cell-style="{background:'#f0f0f0'}" border style="width: 100%;" size="small">
            <el-table-column prop="" label="序号" width="80">
                <template scope="scope">
                    <span>{{(pageIndex - 1) * pagesize + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="dm" label="店名">
            </el-table-column>
            <el-table-column prop="yyjl" label="营运经理">
            </el-table-column>
            <el-table-column prop="dd" label="督导">
            </el-table-column>
            <el-table-column prop="xm" label="员工姓名">
            </el-table-column>
        </el-table>
        <div class="pages">
            <el-pagination background layout="total, prev, pager, next" v-on:current-change="handleSizeChange"
                           :total="total">
            </el-pagination>
        </div>
    </div>
    <el-dialog title="" :visible.sync="dialogVisible" width="30%">
        <span slot="title" class="reject-title">提示</span>
        <div>是否删除？</div>
        <span slot="footer" class="dialog-footer">
                <el-button size="small" v-on:click="dialogVisible = false">否</el-button>
                <el-button size="small" type="primary" v-on:click="handleConfirm">是</el-button>
            </span>
    </el-dialog>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            formItemStyle: {
                marginBottom: 0
            },
            tableData: [],
            pageIndex: 1,//当前页码
            pagesize: 10,//每页数量
            total: 0,//总条数
            dialogVisible: false,//驳回框是否显示
            loading: false,//表格是否加载
            form: {
                manager: "0",//营运经理
                supervisor: "0",//督导
                store: "",//店名妖码
                storeModel: { dm: "全部", ym: "" },//店名选中数据
                uname: "",
            },
            managerData: [],//营运经理数据
            supervisorData: [],//督导数据
            nameData: [],//姓名数据
            storeData: [],//店名数据
            selectStore: "",//选择的店名名称
        },
        created() {
            this.getListData()
            this.getLastMonth()
            this.getNames()
            this.getManagers()
            this.getSupervisors()
            this.getStores()
        },
        mounted() { },
        methods: {
            getLastMonth() {
                var date = new Date();
                var year = date.getFullYear();   //当前年：四位数字
                var month = date.getMonth();     //当前月：0-11
                if (month == 0) {
                    year -= 1;
                    month = 12;
                }
                month = month < 10 ? ('0' + month) : month;   //月份格式化：月份小于10则追加个0

                let lastYearMonth = year + '-' + month;
                this.$set(this.form, "date", lastYearMonth)
                return lastYearMonth
            },
            // 搜索内容
            searchDo() {
                this.pageIndex = 1
                this.getListData()
            },
            // 获取列表数据
            getListData() {
                // this.loading = true
                // let { uname, date, performanceStatus, submitStatus, manager, supervisor, store } = this.form
                // let { pageIndex, pagesize } = this
                // if (!date) {
                //     date = this.getLastMonth()
                // }
                // let reg = new RegExp("-");
                // date = date.replace(reg, "");
                // let formData = new FormData()
                // formData.append("page", pageIndex)
                // formData.append("limit", pagesize)
                // formData.append("xm", uname)
                // formData.append("month", date)
                // formData.append("jxStatus", performanceStatus == -1 ? "" : performanceStatus)
                // formData.append("checkStatus", submitStatus == -1 ? "" : submitStatus)
                // formData.append("yydh", manager == "0" ? "" : manager)
                // formData.append("dddh", supervisor == "0" ? "" : supervisor)
                // formData.append("yaoma", store == "0" ? "" : store)
                // const requestOptions = {
                //     method: "POST",
                //     body: formData
                // };
                // fetch("/btyPerformanceMonthInformation/listPage", requestOptions)
                //     .then(response => response.json())
                //     .then(res => {
                //         if (res.code == 200) {
                //             this.total = res.data.count
                //             this.tableData = res.data.data
                //             this.loading = false
                //         } else {
                //             this.loading = false
                //         }
                //     })
                this.tableData = [{dm:"二狗",yyjl:"ceshi1",dd:"嘟嘟",xm:"败家子"},{dm:"狗",yyjl:"ceshi",dd:"嘟",xm:"败家"}]
            },
            // 重置搜索条件
            resetDo() {
                this.form = {
                    uname: "",
                    manager: "0",
                    supervisor: "0",
                    store: "",
                    storeModel: { dm: "全部", ym: "" }
                }
                this.pageIndex = 1
                setTimeout(() => {
                    this.getListData()
                    this.getSupervisors()
                    this.getStores()
                }, 0);
            },
            // 页码改变
            handleSizeChange(val) {
                this.pageIndex = val
                this.getListData()
            },
            // 删除操作
            handleClick(row){
                this.dialogVisible = true
            },
            // 删除确认操作
            handleConfirm() {
                const { store } = this.form
                if (!store) {
                    this.$message('请选择要驳回的店名');
                    return
                }
                let formData = new FormData()
                formData.append("yaoma", store)
                const requestOptions = {
                    method: "POST",
                    body: formData
                };
                fetch("/btyPerformanceMonthInformation/rejectMd", requestOptions)
                    .then(response => response.json())
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                        } else {
                            this.$message(res.data.message);
                        }
                        this.dialogVisible = false
                    })

            },
            // 获取姓名数据
            getNames() {
                let formData = new FormData()
                formData.append("page", 1)
                formData.append("limit", 10000)
                const requestOptions = {
                    method: "POST",
                    body: formData
                };
                fetch("/btyPerformanceMonthInformation/listXm", requestOptions)
                    .then(response => response.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.nameData = res.data
                        }
                    })
            },
            // 获取营运经理数据
            getManagers() {
                let formData = new FormData()
                formData.append("page", 1)
                formData.append("limit", 10000)
                const requestOptions = {
                    method: "POST",
                    body: formData
                };
                fetch("/btyPerformanceMonthInformation/listYyjl", requestOptions)
                    .then(response => response.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.managerData = [{ yyjl: "全部", yydh: "0" }, ...res.data]
                        }
                    })
            },
            // 获取督导数据
            getSupervisors() {
                let { manager } = this.form
                let formData = new FormData()
                formData.append("page", 1)
                formData.append("limit", 10000)
                formData.append("yydh", manager == "0" ? "" : manager)
                const requestOptions = {
                    method: "POST",
                    body: formData
                };
                fetch("/btyPerformanceMonthInformation/listDd", requestOptions)
                    .then(response => response.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.supervisorData = [{ dd: "全部", dddh: "0" }, ...res.data]
                        }
                    })
            },
            // 获取店名数据
            getStores() {
                let { manager, supervisor } = this.form
                let formData = new FormData()
                formData.append("page", 1)
                formData.append("limit", 10000)
                formData.append("yydh", manager == "0" ? "" : manager)
                formData.append("dddh", supervisor == "0" ? "" : supervisor)
                const requestOptions = {
                    method: "POST",
                    body: formData
                };
                fetch("/btyPerformanceMonthInformation/listDm", requestOptions)
                    .then(response => response.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.storeData = [{ dm: "全部", ym: "" }, ...res.data]
                        }
                    })
            },
            // 营运经理改变
            changeManager(val) {
                this.getStores()
                this.getSupervisors()
                this.$set(this.form, "supervisor", "0")
                this.$set(this.form, "store", "")
                this.form.storeModel={ dm: "全部", ym: "" }
            },
            //督导改变
            changeSupervisor(val) {
                this.getStores()
                this.$set(this.form, "store", "")
                this.form.storeModel={ dm: "全部", ym: "" }
            },
            // 店名改变
            changeStore(item) {
                this.form.store = item.ym
                this.selectStore = item.dm

            },

            // 处理显示月份
            formatMonth(month) {
                if (!month) {
                    return ""
                }
                return month.substring(0, 4) + "-" + month.substring(4)
            },
            nameQuery(value) {
                if (value) {
                    const { nameData } = this
                    this.nameData = nameData.filter(item => {
                        return item.xm.search(value) != -1 || item.tel.search(value) != -1
                    })
                }else{
                    this.nameData = this.nameOldData
                }

            },
        }
    })
</script>
</body>
@}